@charset "utf-8";
.news-box {
  width: 120rem;
  height: 42.375rem;
  background-color: white;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-image: url("@/assets/image/馆院简讯背景（中部）.png");
  /* filter: blur(10px);  */
  /* 调整blur值以改变模糊程度 */
}

.news-box-content {
  width: 105rem;
  height: 42.375rem;
  margin: 0px auto;
}

.news-box-content-title {
  font-weight: bold;
  font-size: 1.875rem;
  color: #111111;
  line-height: 2rem;
  text-align: center;
  padding-top: 3.375rem;
  box-sizing: border-box;
}

.news-box-content-detail {
  width: 100%;
  height: 33.75rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.news-box-content-tab {
  width: 10rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.news-box-content-tab-item {
  width: 10rem;
  font-weight: bold;
  font-size: 1.25rem;
  color: #111111;
  line-height: 2.5rem;
}

.news-box-content-tab-item>span {
  display: none;
}

.news-box-content-tab-item.active {
  font-size: 1.5rem;
}

.news-box-content-tab-item.active>span {
  display: inline;
}

.news-more {
  display: block;
  width: 10rem;
  height: 2.5rem;
  box-sizing: border-box;
  border-radius: 1.25rem;
  border: 0.0625rem solid #A29781;
  font-weight: 400;
  font-size: 1.125rem;
  color: #786D55;
  text-align: center;
  line-height: 2.375rem;
}

.news-box-content-tab-page {
  display: none;
  width: 90rem;
  height: 30.75rem;
  background: #FFFFFF;
  flex-wrap: wrap;
}

.news-box-content-tab-page.active {
  display: block;
}

.new-item-box {
  display: inline-flex;
  width: 42.8125rem;
  height: 9.25rem;
  border-bottom: 0.0625rem #d9d4c9 solid;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0.125rem 1rem;
}

.news-item-date {
  width: 5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-right: 1.25rem;
}

.news-item-date-day {
  font-weight: bold;
  font-size: 1.25rem;
  color: #111111;
  line-height: 2.5rem;
}

.news-item-date-mouth {
  border-top: 0.0625rem #767676 solid;
  font-weight: 400;
  font-size: 1rem;
  color: #767676;
  line-height: 1.875rem;
}

.new-item-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.news-item-content-h {
  width: 100%;
  font-weight: 400;
  font-size: 1.25rem;
  color: #111111;
  display: -webkit-box;
  max-height: 1.25rem;
  line-height: 1.25rem;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.news-item-content-p {
  font-weight: 400;
  font-size: 1rem;
  color: #767676;
  display: -webkit-box;
  max-height: 3rem;
  line-height: 1.5rem;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.news-box-content-tab-item.selected {
  font-size: 1.8em; /* 放大字体 */
  font-weight: bold;
  background-color: #ffffff00;
}

.news-article-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列 */
  grid-gap: 0.5rem; /* 列间距 */
  width: 90rem;
  height: 100%;
  background: #FFFFFF;
  overflow: hidden;
}

.news-article-item {
  
  padding: 1rem;
  border-bottom: 1px solid #d9d4c9;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-height: 12rem; 
  overflow: hidden;
}

.news-article-date {
  flex: 0 0 10rem; /* 固定宽度 */
  font-size: 1rem;
  color: #000000;
  line-height: 1.5rem;
  margin-right: 1rem;
}

.news-article-content {
  flex-grow: 1; /* 占用剩余空间 */
}

.news-article-content h3 {
  font-size: 1.25rem;
  color: #111111;
  margin-bottom: 0.5rem;
}

.news-article-content p {
  font-size: 1rem;
  color: #767676;
  line-height: 1.5rem;
}